<template>
	<view class="definite">
		<u-navbar :is-back="true" :custom-back="BackM" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				<view style="display: flex;align-items: center;justify-content: space-between;width: 100%;}">
					<view class="search" :style="{ width: '100%' }">
						<u-search placeholder="请输入商户姓名或电话" shape="round" @search='searchEquip' v-model="keyword" :show-action="false"></u-search>
					</view>
					<view style="width:7rem;text-align: center;" @click="topModalM">
						<span style="padding: 0 0.5rem; color: #02af74">{{selectClassifyName}}</span>
						<span>
							<u-icon name="arrow-down-fill" color="#02AF74" size="25" style="padding-right: 0.7rem"></u-icon>
						</span>
					</view>
				</view>
			</view>
		</u-navbar>

		<view v-if="topModal == true" class="top-modal">
			<view class="top-modal-item" @click="selectItemM(index)" :style="{ color: selectClassify == index ? '#34b887' : '' }"
			 v-for="(item, index) in classifyLists" :key="index">{{ item.name }}</view>
		</view>

		<u-tabs-swiper ref="tabs" :list="list" name="modelsName" active-color="#4dbf92" font-size="0.7rem" count="count"
		 height="80" :is-scroll="false" :current="current" bar-width="100" gutter="80" @change="tabsChange">
		</u-tabs-swiper>

		<view style="height: 2.2rem;" class="hrhrhr">
		</view>

		<view v-if="selectClassify == 0" class="DZ" style="margin-bottom: 3rem;">
			<view style="marginBottom:1rem" v-for="(item, index) in showData" :load-text="loadText" :key="index">
				<view class="a">
					<view class="b">
						<view @click="selectPedestaM(item,index)" style="display: flex;align-items: center;margin: 0rem 0.2rem;">
							<image v-if="item.select == false" style="width: 1rem; height: 1rem" src="../../style/image/cargo/round.png" alt="" />
							<image v-else style="width: 1rem; height: 1rem" src="../../style/image/cargo/selectRound.png" alt="" />
						</view>
						<view class="c">底座SN号：</view>
						<view class="d">{{ item.sn }}</view>
					</view>
					<view class="e">{{item.onlineState==1?'离线':'在线'}}</view>
				</view>
				<view class="item" @click="foundationM(item)">
					<view class="item-one">
						<view class="item-two">
							<span class="one">商户名称</span>
							<span class="two">{{item.shopName == null ? "暂无设置" : item.shopName}}</span>
						</view>
						<view class="item-two">
							<span class="one">商户地址</span>
							<span class="two">{{item.address == null ? "暂无设置" : item.address}}</span>
						</view>
						<view class="item-two">
							<span class="one">可借</span>
							<span class="two">{{ item.allowOut }}个</span>
						</view>
						<view class="item-two">
							<span class="one">可还</span>
							<span class="two">{{ item.allowIn }}个</span>
						</view>
						<view class="item-two" style="display: flex; justify-content: space-between">
							<span class="one">充电宝SN</span>
							<span class="item-three" style="width: 10rem;word-break: break-all;word-wrap: break-word;">
								<span v-for="(itemd, indexd) in item.terminals" :key="indexd">{{ itemd.sn }},</span>
							</span>
						</view>
					</view>
					<!-- <view class="it">
						<view class="it-one">99999、345643、234567</view>
					</view> -->
				</view>

				<view class="wrap">
					<!-- <view class="item u-border-bottom" v-for="(item, index) in listLength" :key="index">
			{{'第' + item + '条数据'}}
		</view> -->
				</view>
			</view>
			<u-loadmore v-show="loadmoreModal" :status="status" :load-text="loadText" />
		</view>

		<view v-if="selectClassify == 1" class="CDB" style="margin-bottom: 3rem;">
			<view class="em_message" v-for="(item, index) in showData" :key="index">
				<view class="em_me">

					<view @click="selectBankM(item,index)" style="display: flex;align-items: center;margin: 0rem 0.2rem;">
						<image v-if="item.select == false" style="width: 1rem; height: 1rem" src="../../style/image/cargo/round.png" alt="" />
						<image v-else style="width: 1rem; height: 1rem" src="../../style/image/cargo/selectRound.png" alt="" />
					</view>

					<span class="em-one">充电宝SN：</span>
					<span class="em-two">{{item.sn}}</span>
					<!-- <span class="em-three">
						<span>借出：</span>
						<span>4次</span>
					</span> -->
					<div style="display: flex; flex: 1; justify-content: end">
						<div>借出：</div>
						<div style="font-weight: 300">{{item.borrowCount}}次</div>
					</div>
				</view>
			</view>
		</view>

		<view class="footP">
			<view style="height: 3rem;line-height: 3rem;display: flex;align-items: center;justify-content: space-between;width: 100%;">
				<view @click="allSelectBtn" style="margin-left: 0.2rem;width: 40;display: flex;align-items: center;">
					<view>
					</view>
					<view style="margin-left:0.5rem" class="">
						<view>已选：
							<span style="font-size: 0.76rem;font-family: PingFang SC;font-weight: 300;color: #666666;">
								底座{{pedestalCount}},充电宝{{bankCount}}
							</span>
						</view>
					</view>
				</view>
				<view @click="DBM" class="foot-right" style="margin-right: 0rem">
					<view class="settle">调拨</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		findPosType,
		findTerminalByType
	} from "../../utils/uniApi";

	import Unavbar from "../../uview-ui/components/u-navbar/u-navbar.vue";
	import utabsswiper from "../../uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue";

	import uSearch from "../../uview-ui/components/u-search/u-search.vue";

	import uIcon from "../../uview-ui/components/u-icon/u-icon.vue";
	import {
		AppModule
	} from "../../store/modules/app";



	// declare module 'vue/types/vue' {
	//     interface Vue {
	//         [key: string]: any,
	//     }
	// }
	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			"u-navbar": Unavbar,
			"u-tabs-swiper": utabsswiper,
			"u-search": uSearch,
			'u-icon': uIcon
		},
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public list: any = [];

		public keyword = "";

		public loadmoreModal = true;

		public showData: any = [];

		public selectClassify = 0;

		public selectClassifyName = "底座";

		public topModal: any = false;
		public current = 0;
		public classifyLists = [{
				name: "底座",
			},
			{
				name: "充电宝",
			},
		];

		//加载
		public status = "nomore";
		public loadText = {
			loadmore: "轻轻上拉",
			loading: "努力加载中",
			nomore: "暂无更多数据",
		};

		public listLength = 15;
		public page = 0;

		public continueTypes = true;

		public stopTypes = false

		// 状态
		public CDType: number = 1;
		public posTypeId = ""; //获取列表的id
		public pageData = 1;


		public pedestalCount = 0 //底座的数量
		public pedestalList: any = []
		public bankCount = 0 //充电宝的数量
		public bankList: any = []

		created() {
			this.pedestalList = []
			AppModule.pedestalListAction(this.pedestalList)
			this.bankList = []
			AppModule.BankListAction(this.bankList)
		}
		onShow() {
			uni.showLoading({
				title: "加载中",
			});
			this.accordingBarM();
		}

		onHide() {
			uni.hideLoading();
		}

		onPullDownRefresh() {
			console.log("refresh");

			setTimeout(function() {
				uni.redirectTo({
					url: "../../pages/equipment/myEquipment",
				});
				uni.stopPullDownRefresh();
			}, 1000);
		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
			//  uni.navigateTo({
			// url: './selectBusin'
			// });
		}

		accordingBarM() {
			this.list = [];
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				type: this.CDType,
			};
			findPosType(params).then((res: any) => {
				//设备机型分组
				if (res.data.code == 200) {
					if (this.posTypeId == "") {
						this.posTypeId = res.data.data[0].posTypeId;
					} else {}
					// console.log("每次的机型posTypeId", this.posTypeId);
					this.accordingM(1, 1);
					// console.log(this.posTypeId, res.data, res.data.data[0], "posTypeId");
					res.data.data.filter((item: any, index: number) => {
						let arr = [];
						var obj: object = {
							modelsName: `${item.modelsName}(${item.typeCont})`,
							posTypeId: item.posTypeId,
							typeCont: item.typeCont,
						};

						this.list.push(obj); //头部
						// console.log("头部数组list", this.list);
					});
				} else {
					uni.showToast({
						title: "请求失败",
						icon: "none",
						duration: 2000,
					});
				}
				// console.log(this.list);
			});
		}

		//  根据 机型ID  充电宝，1充电宝底座  页码  获取列表
		accordingM(data: any, pageData: any) {
			uni.showLoading({
				title: "加载中",
			});
			let paramsed = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				posTypeId: this.posTypeId, // 机型ID
				keyWord: this.keyword,
				// state:'' ,  //铺货状态 yph 已铺货|wph 未铺货
				type: this.CDType, //  0 充电宝，1充电宝底座 2充电线
				pageNo: this.pageData,
				pageSize: 10,
			};
			// console.log("获取每一个机型的列表数组参数", paramsed);
			findTerminalByType(paramsed).then((res: any) => {
				uni.hideLoading();
				// console.log(JSON.stringify(res.data.data), "1获取每一个机型的列表数组数据");
				// this.continueType=res.data.hasNext  //true
				if (res.data.code == 200) {
					var boolee = res.data.hasNext == false && this.continueTypes == false;
					if (res.data.hasNext == true) {
						this.status = "loadmore";
					} else {
						this.status = "nomore";
					}
					// console.log(res.data.hasNext, this.continueTypes, boolee);
					if (res.data.isFirst || !boolee) {
						res.data.data.filter((item: any, index: number) => {
							if (this.selectClassify == 0) { //底座
								var isSelect = false
								AppModule.pedestalList.filter((itemd: any, indexd: any) => {
									if (itemd.id === item.id) {
										isSelect = true;
									}
								})
								item["select"] = isSelect;
							} else {
								var isSelect = false
								AppModule.BankList.filter((itemd: any, indexd: any) => {
									if (itemd.id === item.id) {
										isSelect = true;
									}
								})
								item["select"] = isSelect;
							}
						});
						if (this.showData.length > 0 && this.pageData == 1) { //搜索  删除已有数据
							this.showData = [];
							this.stopTypes = false
						}
						this.showData = this.showData.concat(res.data.data)
						if (res.data.hasNext == false) {
							this.continueTypes = false;
						}
						
					} else {
						this.stopTypes = true
					}
				} else {
					uni.showToast({
						title: "请求数据失败",
						icon: "none",
						duration: 2000,
					});
				}
			});
		}

		selectPedestaM(data: any, index: any) {
			data.select = !data.select
			if (data.select) {
				this.pedestalList.push(data)
			} else {
				this.pedestalList.filter((itemd: any, indexd: any) => {
					if (itemd.id == data.id) {
						this.pedestalList.splice(indexd, 1);
					}
				})
			}
			AppModule.pedestalListAction(this.pedestalList)
			this.pedestalCount = this.pedestalList.length
		}

		selectBankM(data: any, index: any) {
			data.select = !data.select
			if (data.select) {
				this.bankList.push(data)
			} else {
				this.bankList.filter((itemd: any, indexd: any) => {
					if (itemd.id == data.id) {
						this.bankList.splice(indexd, 1);
					}
				})
			}
			AppModule.BankListAction(this.bankList)
			this.bankCount = this.bankList.length
		}
		//调拨
		DBM() {
			if (this.pedestalList.length < 1 && this.bankList < 1) {
				uni.showToast({
					title: "请选择调拨设备",
					icon: "none",
					duration: 1000,
				});
				return
			}
			let DiaoBo = {
				pedestal: this.pedestalList,
				bank: this.bankList
			};
			uni.navigateTo({
				url: './change?DiaoBo=' + encodeURIComponent(JSON.stringify(DiaoBo)),
			});
		}

		BackM() {
			uni.switchTab({
				url: "./index",
			});
		}

		tabsChange(index: any) {
			this.pageData = 1;
			this.continueTypes = true;
			this.showData = [];

			this.continueTypes = false;

			uni.showLoading({
				title: "加载中",
			});

			console.log(13321312312312312);

			// document.body.scrollTop = document.documentElement.scrollTop = 0;

			console.log(index, "909090909090");

			this.current = index;

			this.getBarId(index);
		}

		//获取当前bar对应的 ’id‘
		getBarId(index: any) {
			this.list.filter((itemed: any, indexed: number) => {
				if (index == indexed) {
					console.log(itemed);
					this.posTypeId = itemed.posTypeId;
					this.accordingM(1, 1);
				}
			});
		}

		onReachBottom() {

			if (this.stopTypes == false) {
				this.pageData = this.pageData + 1;
				this.accordingM(1, 1);

			}
		}

		topModalM() {
			this.topModal = !this.topModal
		}

		selectItemM(index: number) {
			uni.showLoading({
				title: "加载中",
			});
			this.pageData = 1;

			this.continueTypes = true;

			this.showData = [];

			this.stopTypes = false

			this.selectClassify = index;

			this.selectClassifyName = index == 0 ? "底座" : "充电宝";

			this.topModal = !this.topModal;

			if (this.selectClassifyName == "底座") {
				this.CDType = 1; //底座
			} else {
				this.CDType = 0;
			}

			this.accordingBarM();
		}

		foundationM(data: any) {
			let datas = {
				a: data.id,
				b: '我的设备'
			}
			if (data.status == 0) {
				uni.showToast({
					title: '设备未铺货',
					icon: 'none',
					duration: 2000
				});
			} else {
				uni.redirectTo({
					url: `../../pages/item/pedestal/index?data=${JSON.stringify(datas)}`,
				});
			}
		}

		searchEquip(value:any) {
			console.log('搜索了    设备')
			this.keyword = value
			this.accordingM(1, 1)
		}
	}
</script>

<style lang='scss' scoped>
	/deep/.u-tabs {
		z-index: 1;
		background: rgb(255, 255, 255) none repeat scroll 0% 0%;
		position: fixed;
	}

	.definite {
		font-family: PingFang SC;
		background: #f3f5f7;
	}

	uni-page-body {
		height: 100%;
		background: #f3f5f7;
	}

	.em_message {
		padding: 0.4rem 0.6rem 0 0.6rem;
		background: #f3f5f7;
	}

	.em_me {
		line-height: 1.5rem;
		padding: 0.6rem 0.4rem;
		background: #ffffff;
		border-radius: 0.3rem;
		margin-bottom: 0.08rem;
	}

	.em-one {
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.em-two {
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.em-three {
		float: right;
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.em_message {
		padding: 0.4rem 0.6rem 0 0.6rem;
		background: #f3f5f7;
	}

	.item {
		margin: 0 0.6rem;
	}

	.item-one {
		padding: 0.4rem 0.4rem 0 0.4rem;
		background: #ffffff;
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 400;
		border-radius: 0 0 0.3rem 0.3rem;
	}

	.item-two {
		line-height: 1.5rem;
	}

	.item-three {
		float: right;
	}

	.it {
		position: relative;
		height: 1.5rem;
		background: #fff;
	}

	.it-one {
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		position: absolute;
		right: 0.4rem;
	}

	.em_me {
		position: relative;
		padding: 0.8rem 0.4rem;
		background: #ffffff;
		border-radius: 0.3rem;
		margin-bottom: 0.08rem;
		display: flex;
		align-items: center;
	}

	.em-one {
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.em-two {
		font-size: 0.75rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #000000;
	}

	.em-three {
		position: absolute;
		right: 0;
		width: 2.15rem;
		height: 1.08rem;
		line-height: 1rem;
		text-align: center;
		background: #ff0000;
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		border-radius: 0.5rem 0 0 0.5rem;
	}

	.one {
		color: #333333;
	}

	.two {
		float: right;
		color: #000000;
	}

	.top-modal {
		position: fixed;
		background-color: white;
		box-shadow: 0rem 5px 5px #999;
		width: 6rem;
		border-radius: 5px;
		right: 1rem;
		text-align: center;
		z-index: 9;
	}

	.top-modal-item {
		padding: 0.5rem;
	}


	.a {
		display: flex;
		justify-content: space-between;
		margin: 0.2rem 0.6rem;
		background-color: white;
		padding: 0.5rem;

		border-top-left-radius: 0.3rem;
		border-top-right-radius: 0.3rem;
	}

	.b {
		display: flex;
		align-items: center;
	}

	.e {

		background-color: red;
		padding: 0.1rem 0.3rem;
		color: white;
		border-top-left-radius: 0.4rem;
		border-bottom-left-radius: 0.4rem;

	}


	.footP {
		position: fixed;
		z-index: 9999;
		bottom: 0;
		background-color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content-bottom {
		margin: 1rem;
	}

	.car-content {
		padding: 0rem 0.5rem 0.5rem 0.5rem;
		background-color: #f4f5f7;
		margin-bottom: 3rem;
	}

	.foot-right {
		display: flex;
	}

	.settle {
		background-color: #02af74;
		height: 100%;
		width: 5rem;
		text-align: center;
		font-size: 0.8rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: white;
		margin-left: 1rem;
	}

	.image1 {
		margin-right: 0.3rem;
		width: 1rem !important;
		height: 1rem;
	}
</style>
